<template>
  <el-dialog title='修改云柜员技能组' :visible.sync='isShow' width='700px' :lock-scroll=false @open="initializtaion" :close-on-click-modal=false @close='clearForm("queryForm")'>
    <div v-loading="loading">
      <div class="detailInfo">
        <el-card class='type-info-box-card'>
          <el-row>
            <el-col :lg='24'>
              <el-form ref='queryForm' size='mini' :model="queryForm" label-width="120px" :rules="rules" label-position="center">
                <el-row :gutter="50">
                  <el-col :span='100'>
                    <el-form-item label='技能组编号' class='typeInfo-el-form-item' prop='BUSITYPE'>
                      <el-input v-model='queryForm.BUSITYPE' style="width:350px" placeholder="请输入技能组编号" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="50">
                  <el-col :span='100'>
                    <el-form-item label='技能组名称' class='typeInfo-el-form-item' prop='BUSITYPENAME'>
                      <el-input v-model='queryForm.BUSITYPENAME' style="width:350px" placeholder="请输入技能组名称"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="30">
                            <el-col :span='12' >
                                <el-form-item label='工作日可用' prop='WORKDAY'>
                                      <el-select v-model='queryForm.WORKDAY'  >
                                          <el-option v-for='item in tellerWorkdayOpions' :key='item.value' :label='item.label' :value='item.value'>
                                          </el-option>
                                      </el-select>
                                </el-form-item>
                            </el-col>
                          </el-row> 
                          
                          <el-row :gutter="30">
                            <el-col :span='12' >
                                <el-form-item label='节假日可用' prop='HOLIDAY'>
                                      <el-select v-model='queryForm.HOLIDAY' >
                                          <el-option v-for='item in tellerHolidayOpions' :key='item.value' :label='item.label' :value='item.value'>
                                          </el-option>
                                      </el-select>
                                </el-form-item>
                            </el-col>
                          </el-row>
                               <el-row :gutter="50">
                  <el-col :span='12'>
                    <el-form-item label='技能组状态' class='typeInfo-el-form-item' prop='BUSITYPESTUS'>
                     <el-radio v-model='queryForm.BUSITYPESTUS' label="0" >可用</el-radio>
                     <el-radio v-model='queryForm.BUSITYPESTUS' label="1" >不可用</el-radio>
                    </el-form-item>
                  </el-col>
                   <el-col :span='12'>
                    <el-form-item label='G平台技能id' class='typeInfo-el-form-item' prop='GNSID'>
                      <el-input v-model='queryForm.GNSID' placeholder="请输入G平台技能id"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div slot="footer" style="margin:10px 0;text-align:center">
        <el-button size="mini" @click="isShow=false">取消</el-button>
        <el-button type='primary' size='mini' @click="submit">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import request from "@/common/utils/requestCT";
  import tellerSkillAdd from "@/message/CTManage/skill/teller-skill-update";
  export default {
    data() {
      return {
        loading: false,
        queryForm: { //表单数据
          BUSITYPE: '',
          BUSITYPENAME: '',
          WORKDAY:'',
          HOLIDAY:'',
           BUSITYPESTUS:'',
          GNSID:'',
        },
        rules: { //表单校验规则
          BUSITYPENAME: [{
            required: true,
            message: "请输入技能组名称",
            trigger: "blur"
          }],
           BUSITYPE: [{
            required: true,
            message: "请输入技能组编号",
            trigger: "blur"
          }]
          // WORKDAY: [
          //   { required: true, message: "请选择工作日是否可用", trigger: "blur" }
          // ],
          // HOLIDAY: [
          //   { required: true, message: "请选择节假日是否可用", trigger: "blur" }
          // ]
        },
         tellerWorkdayOpions:[
          { label: '可用', value:'1' },
          { label: '不可用', value:'0' }
         ],
          tellerHolidayOpions:[
          { label: '可用', value:'1' },
          { label: '不可用', value:'0' }
          ]
      };
    },
    props: {
      option: Object,
      message: Array
    },
    methods: {
      initializtaion() {
        this.queryForm.BUSITYPE = this.message[0].BUSITYPE;
        this.queryForm.BUSITYPENAME = this.message[0].BUSITYPENAME;
        this.queryForm.WORKDAY = this.message[0].WORKDAY;
        this.queryForm.HOLIDAY = this.message[0].HOLIDAY;
        this.queryForm.BUSITYPESTUS = this.message[0].BUSITYPESTUS;
        this.queryForm.GNSID = this.message[0].GNSID;
      },
      submit() {
        //添加策略事件
        this.$refs["queryForm"].validate(valid => {
          if (valid) {
            this.loading = true;
            let resBody = new tellerSkillAdd();
            resBody.data.BUSITYPE = this.queryForm.BUSITYPE;
            resBody.data.BUSITYPENAME = this.queryForm.BUSITYPENAME;
            resBody.data.WORKDAY = this.queryForm.WORKDAY;
            resBody.data.HOLIDAY = this.queryForm.HOLIDAY;
            resBody.data.BUSITYPESTUS = this.queryForm.BUSITYPESTUS;
            resBody.data.GNSID = this.queryForm.GNSID; 
            request(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  this.loading = false;
                  this.$message({
                    type: "success",
                    message: "云柜员技能组修改成功!"
                  });
                  this.isShow = false;
                  this.$emit("refreshTable");
                } else {
                  this.$message({
                    type: "error",
                    message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
                  });
                }
              })
              .catch(error => {
                this.loading = false;
                console.log(error);
              });
          }
        });
      },
      clearForm(item) {
        if (this.$refs.queryForm) {
          this.$refs.queryForm.resetFields();
          this.$refs.queryForm.clearValidate();
        }
      }
    },
    computed: {
      isShow: {
        get: function() {
          return this.option.isShow;
        },
        set: function(newValue) {
          this.option.isShow = newValue;
        }
      }
    },
    async created() {}
    // mounted() {
    //   window.addEventListener("scroll", this.handleScroll);
    // }
  };
</script>

<style lang="scss" scope>
  .isShow {
    display: none;
  }
  .returnBtn {
    width: 50px;
    height: 50px;
    background: #000;
    opacity: 0.5;
    position: fixed;
    right: 45px;
    bottom: 53px;
    border-radius: 3px;
    text-align: center;
    padding-top: 15px;
  }
  .returnBtn:hover {
    opacity: 0.9;
  }
  .modelMargin {
    margin: 5px;
    .el-card__header {
      height: 65px;
    }
  }
  #returnBtnTop {
    height: 50px;
    background: #409eff;
    width: 100%;
    transition: all 0.3s;
  }
  .editClass {
    input.el-input__inner {
      border: none;
      background: rgba(0, 0, 0, 0) !important;
    }
  }
  .inputWidth100 {
    width: 100%;
  }
</style>
